<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>运单打印</title>
    <link rel="stylesheet" href="{$Think.ADMIN_SITE_ROOT}/css/admin.css">

    <style>
         body { margin: 0; }
        .waybill_back { position: relative; width: {$waybill_info.waybill_pixel_width}px; height: {$waybill_info.waybill_pixel_height}px; }
        .waybill_back img { width: {$waybill_info.waybill_pixel_width}px; height: {$waybill_info.waybill_pixel_height}px; }
        .waybill_design { position: absolute; left: 0; top: 0; width: {$waybill_info.waybill_pixel_width}px; height: {$waybill_info.waybill_pixel_height}px; }
        .waybill_item { position: absolute; left: 0; top: 0; width:100px; height: 20px; }
    </style>
</head>
<body>

<div class="waybill_back">
    <img src="{present name="waybill_info.waybill_image_url"}{$waybill_info.waybill_image_url}{/present}" alt="">
</div>
<div class="waybill_design">
    {notempty name="waybill_info.waybill_data"}
    {foreach name="waybill_info.waybill_data" item="value"}
    {present name="value.check"}
    <div class="waybill_item" style="left:{$value.left}px; top:{$value.top}px; width:{$value.width}px; height:{$value.height}px;">{$value.content}</div>
    {/present}
    {/foreach}
    {/notempty}
</div>
<div class="control">
    &nbsp;<a id="btn_print" class="btn btn-green" href="javascript:;">{$Think.lang.deliver_print}</a>
    {$Think.lang.other_template}：
    <select id="waybill_list" >
        {notempty name="waybill_list"}
        {foreach name="waybill_list" item="value"}
        <option value="{$value.waybill_id}" {if condition="$Request.param.waybill_id eq $value.waybill_id"}selected{/if}>{$value.waybill_name}</option>
        {/foreach}
        {/notempty}
    </select>
    <a id="btn_change" class="dsui-btn-edit" href="javascript:;">{$Think.lang.replace_template}</a>
</div>
<script src="{$Think.PLUGINS_SITE_ROOT}/jquery-2.1.4.min.js"></script>
<script>
    $(document).ready(function() {
        $('#btn_print').on('click', function() {
            pos();

            $('.waybill_back').hide();
            $('.control').hide();

            window.print();
        });

        var pos = function () {
            var top = '{$waybill_info.waybill_pixel_top}';
            var left = '{$waybill_info.waybill_pixel_left}';

            $(".waybill_design").each(function(index) {
                var offset = $(this).offset();
                var offset_top = offset.top + top;
                var offset_left = offset.left + left;
                $(this).offset({ top: offset_top, left: offset_left})
            });
        };

        //更换模板
        $('#btn_change').on('click', function() {
            var waybill_id = $('#waybill_list').val();
            var url = document.URL + '&waybill_id=' + waybill_id;
            window.location.href = url;
        });
    });
</script>

</body>
</html>

